import * as Cesium from "cesium";

const testVertex = `
  in vec3 position3DHigh;
  in vec3 position3DLow;
  in float batchId;
  in vec3 position;
  // in vec2 a_texCoord;
  // in vec2 v_textureCoordinates;
  in vec2 textureCoords;
  uniform sampler2D u_texture;
  precision mediump float;
  out vec2 v_texCoord;

  void main() {
    vec3 upDir = normalize(position.xyz);
    vec4 color = texture(u_texture, v_texCoord);
    // v_texCoord = v_textureCoordinates;
    v_texCoord = textureCoords;
    gl_Position = czm_projection * czm_modelView * vec4(position, 1.0);
  }
`;

const testFrag = `
  in vec2 v_texCoord;
  precision mediump float;
  uniform float randomNumber;
  uniform sampler2D u_texture;
  out vec4 myFragColor;

  void main() {
    float time = fract(czm_frameNumber / 60.0);
    // gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    // gl_FragColor = vec4(randomNumber, randomNumber * czm_frameNumber, randomNumber, 1.0);
    vec4 color = texture(u_texture, v_texCoord);
    myFragColor = color;
    // myFragColor = vec4(1.0, 1.0, 0.0, 1.0);
  }
`;
export default class HeatmapPrimitive {
  constructor(image = null, geometry = null) {
    this.drawCommand = null;
    const _image = new Image();
    _image.src = image
    this._image = _image;
    // console.log(this._image)
    this.texture = null;
    this._geometry = geometry
    // 旋转轴
    this.rotationAxis = null;
    this._canvas = this.getColorRamp();
  }
  /**
   * 将经纬度坐标转换为笛卡尔坐标
   * @param {*} i 列索引
   * @param {*} j 航索引
   * @returns [pos.x, pos.y, pos.z]
   */
  transformPos(lonlat, height = 300000.0) {
    let pos = Cesium.Cartesian3.fromDegrees(...lonlat, height);
    return [pos.x, pos.y, pos.z];
  }
  /**
   * 根据坐标中心点生成周围四个点坐标
   * @param {*} v1
   * @param {*} v2
   * @returns
   */
  addVector(v1, v2) {
    return [v1[0] + v2[0], v1[1] + v2[1]];
  }
  /**
   * 创建DrawCommand对象，用于渲染Primitive对象。
   * @param {*} context
   */
  createDrawCommand(context) {
    let geometry = this._geometry;
    let vertexArray = Cesium.VertexArray.fromGeometry({
      context: context,
      geometry: geometry,
      attributeLocations:
        Cesium.GeometryPipeline.createAttributeLocations(geometry),
    });
    let shaderProgram = Cesium.ShaderProgram.fromCache({
      context: context,
      vertexShaderSource: testVertex,
      fragmentShaderSource: testFrag,
      attributeLocations:
        Cesium.GeometryPipeline.createAttributeLocations(geometry),
    });
    let uniformMap = {
      randomNumber() {
        return Math.random();
      },
      u_texture: () => {
        if (this.texture === null) {
          return context.defaultTexture;
        }
        return this.texture;
      },
    };
    let renderState = Cesium.RenderState.fromCache({
      depthTest: {
        enabled: true,
      },
      depthMask: false,
      blending: Cesium.BlendingState.ALPHA_BLEND,
    });
    const translate = new Cesium.Cartesian3(0, 0, 20000);

    this.drawCommand = new Cesium.DrawCommand({
      vertexArray: vertexArray,
      shaderProgram: shaderProgram,
      renderState: renderState,
      uniformMap: uniformMap,
      pass: Cesium.Pass.OPAQUE,
      castShadows: false,
      receiveShadows: false,
      primitiveType: Cesium.PrimitiveType.TRIANGLES,
      // 设置模型的位置，这个是固定位置
      modelMatrix: Cesium.Matrix4.fromTranslation(translate),
    });
  }
  /**
   * 颜色过渡方案
   * @returns canvas对象
   */
  getColorRamp() {
    const ramp = document.createElement("canvas");
    ramp.width = 1;
    ramp.height = 100;
    const ctx = ramp.getContext("2d");
    const grd = ctx.createLinearGradient(0, 0, 0, 100);
    grd.addColorStop(1, "#0000ff");
    grd.addColorStop(0.5, "#00ff00");
    grd.addColorStop(0.75, "#ffff00");
    grd.addColorStop(1.0, "#ff0000");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 1, 100);
    return ramp;
  }
  /**
   * 创建纹理
   * @param {*} context
   */
  createTexture(context) {
    if (this._image === null) {
      this._image = new Image();
      this._image.src = "五角星.png";
      this._image.onload = () => {
        this.texture = new Cesium.Texture({
          context: context,
          source: this._canvas,
        });
      };
    } else {
      this._image.onload = () => {
        this.texture = new Cesium.Texture({
          context: context,
          source: this._image,
        });
      };
    }
  }
  /**
   * 更新Primitive对象，将其添加到渲染队列中。
   * @param {*} framestate
   */
  update(framestate) {
    if (this.drawCommand === null) {
      this.createDrawCommand(framestate.context);
      // console.log(framestate.context);
    }
    if (this.texture === null) {
      this.createTexture(framestate.context);
    }
    framestate.commandList.push(this.drawCommand);
  }
}
